<template>
  <el-form ref="formRef" :model="form" :show-message="false" label-width="100px" size="default" label-suffix="：">
    <el-row>
      <el-col :span="12">
        <el-form-item label="用户昵称" prop="nickName">
          <el-input v-model="form.nickName" placeholder="请输入用户昵称" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="账号" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入账号" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item>
          <el-transfer
              :titles="['角色列表', '已选角色']"
              v-model="form.roleList"
              filterable
              :props="{
                key: 'id',
                label: 'name'
              }"
              filter-placeholder="请输入角色名称搜索"
              :data="roleDataList"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup name="x-role">
import useStore from '@/stores/modules/sys/user';
const users = useStore();
import {onMounted, reactive, ref} from "vue";
onMounted(() => {
  getRoleList()
})

const formRef = ref()

const form = reactive({
  id: "",
  nickName: "",
  userName: "",
  roleList: [],
})

const roleDataList = ref([])

/**
 * 获取角色列表
 * @returns {Promise<void>}
 */
const getRoleList = async () => {
  let list = await users.getRoleList()
  if (! list) {
    return
  }
  roleDataList.value = list
}

/**
 * 详情数据回填
 * @param data
 */
const render = (data) => {
  if (! Helper.empty(data)) {
    for (let key in data) {
      form[key] = data[key]
    }
  }
}

/**
 * 提交
 * @returns {Promise<void>}
 */
const submit = async () => {
  if (Helper.emptyArray(form.roleList)) {
    Msg.error("角色不能为空")
    return
  }

  let params = {}
  params.id = form.id
  params.roleList = form.roleList

  let result = await users.roleSave(params)
  if (result) {
    Dialog.close()
  }
}

defineExpose({ submit, render })
</script>